<template>
	<view class="kill_ranking">
		<Navbar></Navbar>
		<view class="content">
			<view class="title">排行榜</view>
			<view class="header">
				<view class="item">
					<image :src="two_cover" class="cover"></image>
					<view class="name">{{two_name}}</view>
					<view class="number">{{two_number}}</view>
				</view>
				<view class="item">
					<image :src="one_cover" class="cover"></image>
					<view class="name">{{one_name}}</view>
					<view class="number">{{one_number}}</view>
				</view>
				<view class="item">
					<image :src="three_cover" class="cover"></image>
					<view class="name">{{three_name}}</view>
					<view class="number">{{three_number}}</view>
				</view>
			</view>
			<view class="list_title">
				<view class="item">排名/用户</view>
				<view class="item">奖励{{field_name}}</view>
			</view>

			<scroll-view scroll-y class="scroll_view">
				<view class="list">
					<view class="item" v-for="(item,index) in list">
						<view class="left">
							<text>{{index+4}}</text>
							<image :src="item.user.head_portrait" class="cover"></image>
							<text class="name">{{item.user.nickname}}</text>
						</view>
						<view class="right">
							<image :src="field_url"></image>
							<text>{{item.profit}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		baseImageUrl,
		field
	} from "@/utils/config.js";
	import {
		pursuePhb
	} from '@/request/api.js';
	export default {
		data() {
			return {
				type: null,
				
				one_cover: "",
				one_name: "",
				one_number: "",

				two_cover: "",
				two_name: "",
				two_number: "",

				three_cover: "",
				three_name: "",
				three_number: "",
				
				list: [],
				field_url: "",
				field_name: ""
			}
		},
		onLoad(options) {
			let type = this.type = options.type;

			const obj = {
				silver: `${baseImageUrl}/common/gy.png`,
				foodstuff: `${baseImageUrl}/common/hot_cover1.png`,
				cloth: `${baseImageUrl}/common/hot_cover2.png`,
				titledeed: `${baseImageUrl}/common/hot_cover3.png`,
				music: `${baseImageUrl}/common/hot_cover4.png`,
				escort: `${baseImageUrl}/common/hot_cover5.png`,
			};
			this.field_url = obj[type];
			this.field_name = field[type];

			this.getList();
		},
		methods: {
			async getList() {
				let {
					list,
					three
				} = await pursuePhb({
					field: this.type
				});
				this.list = list;

				if (three.length) {
					let [oneItem, twoItem, threeItem] = three;
					this.one_cover = oneItem?.user?.head_portrait;
					this.one_name = oneItem?.user?.nickname;
					this.one_number = oneItem?.user?.silver;

					this.two_cover = twoItem?.user?.head_portrait;
					this.two_name = twoItem?.user?.nickname;
					this.two_number = twoItem?.user?.silver;

					this.three_cover = threeItem?.user?.head_portrait;
					this.three_name = threeItem?.user?.nickname;
					this.three_number = threeItem?.user?.silver;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.kill_ranking {
		height: 100vh;
		background-color: #29170D;

		.content {
			width: 726rpx;
			padding: 0 42rpx;
			box-sizing: border-box;
			height: calc(100vh - #{$navbarHeight} - 80rpx);
			// background: url(@/static/images/kill/bg3.png) no-repeat;
			background: url(#{$baseImageUrl}/kill/bg3.png) no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 12rpx;

			.title {
				width: 100%;
				height: 25rpx;
				line-height: 25rpx;
				text-align: center;
				color: #A23B2C;
				font-size: 25rpx;
				font-weight: 400;
				font-family: SimSun;
				padding-top: 24rpx;
			}

			.header {
				height: 368rpx;
				display: flex;
				justify-content: space-between;

				.item {
					flex: 1;
					padding: 0 30rpx;
					box-sizing: border-box;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					align-items: center;

					&:nth-child(1) {
						padding-top: 112rpx;

						.name {
							margin-bottom: 22rpx;
						}
					}

					&:nth-child(2) {
						padding-top: 92rpx;

						.name {
							margin-bottom: 24rpx;
						}
					}

					&:nth-child(3) {
						padding-top: 106rpx;

						.name {
							margin-bottom: 26rpx;
						}
					}

					.cover {
						width: 110rpx;
						height: 110rpx;
						border-radius: 50%;
					}

					.name {
						width: 100%;
						height: 24rpx;
						line-height: 24rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 24rpx;
						font-weight: 400;
						font-family: SimSun;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.number {
						color: #FFFFFF;
						font-size: 20rpx;
						font-weight: 400;
						font-family: SimSun;
					}
				}
			}

			.list_title {
				height: 24rpx;
				line-height: 24rpx;
				padding: 0rpx 34rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.item {
					color: #000000;
					font-size: 24rpx;
					font-weight: 400;
					font-family: SimSun;
				}
			}

			.scroll_view {
				height: calc(100vh - #{$navbarHeight} - 80rpx - 25rpx - 380rpx - 24rpx - 24rpx);

				.list {
					padding-top: 35rpx;

					.item {
						width: 100%;
						height: 112rpx;
						margin-bottom: 20rpx;
						padding: 20rpx 40rpx;
						box-sizing: border-box;
						// background: url(@/static/images/kill/item2.png) no-repeat;
						background: url(#{$baseImageUrl}/kill/item2.png) no-repeat;
						background-size: 100% 100%;
						display: flex;
						justify-content: space-between;

						.left {
							display: flex;
							align-items: center;

							text {
								color: #000000;
								font-size: 40rpx;
								font-weight: 400;
								font-family: SimSun;
							}

							.cover {
								width: 72rpx;
								height: 72rpx;
								border-radius: 50%;
								margin: 0 20rpx;
							}

							.name {
								color: #000000;
								font-size: 24rpx;
								font-weight: 400;
								font-family: SimSun;
							}
						}

						.right {
							display: flex;
							align-items: center;

							image {
								width: 30rpx;
								height: 30rpx;
							}

							text {
								color: #000000;
								font-size: 24rpx;
								font-weight: 400;
								font-family: SimSun;
								padding-left: 10rpx;
								box-sizing: border-box;
							}
						}
					}
				}
			}
		}
	}
</style>